import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';
const BarChart = ({ title }) => {
    // 1. 图表的初始化在useEffect中完成	2. 挂载渲染的节点需要有宽高
    const chartRef = useRef();
    useEffect(() => {
        // 获取DOM元素
        // const chartDom = document.getElementById('main');
        const chartDom = chartRef.current;
        // echart实例初始化
        const myChart = echarts.init(chartDom);
        const option = {
            title: {
                text: title,
            },
            xAxis: {
                type: 'category',
                data: ['Vue', 'React', 'Angular']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [50, 60, 70],
                    type: 'bar'
                }
            ]
        };
        option && myChart.setOption(option);
    }, [title]);
    return (
        <div className="bar-chart" ref={chartRef} style={{ width: "600px", height: "400px" }}>
        </div>
    );
};
export default BarChart;